<!DOCTYPE html>
<html class="client-nojs vector-feature-night-mode-disabled vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-sticky-header-enabled" lang="en" dir="ltr"><head>
<meta charset="UTF-8">
<title>Table cell</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="https://en.wikipedia.org/wiki/Table_cell"> <link href="./mw/ext.pygments.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.icons.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.search.codex.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/user.styles.css" rel="stylesheet" type="text/css">
<meta name="ResourceLoaderDynamicStyles" content="">
<link rel="stylesheet" type="text/css" href="./mw/site.styles.css">
<link rel="stylesheet" type="text/css" href="./mw/noscript.css">
<link rel="stylesheet" type="text/css" href="./footer.css">
<link rel="stylesheet" type="text/css" href="./vector-2022.css">
</head>
<body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-Table_cell rootpage-Table_cell skin-vector-2022 action-view">
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="mw-content-container">
<main id="content" class="mw-body">
<header class="mw-body-header vector-page-titlebar">
<h1 id="firstHeading" class="firstHeading mw-first-heading">
<span id="openzim-page-title" class="mw-page-title-main"><span class="mw-page-title-main">Table cell</span></span>
</h1>
</header>
<a id="top"></a>
<div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="en" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr">
<style data-mw-deduplicate="TemplateStyles:r1305433154">
/* start https://en.wikipedia.org/ */
.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}@media print{body.ns-0 .mw-parser-output .ambox{display:none!important}}
/* end https://en.wikipedia.org/ */
</style><style data-mw-deduplicate="TemplateStyles:r1248332772">
/* start https://en.wikipedia.org/ */
.mw-parser-output .multiple-issues-text{width:95%;margin:0.2em 0}.mw-parser-output .multiple-issues-text>.mw-collapsible-content{margin-top:0.3em}.mw-parser-output .compact-ambox .ambox{border:none;border-collapse:collapse;background-color:transparent;margin:0 0 0 1.6em!important;padding:0!important;width:auto;display:block}body.mediawiki .mw-parser-output .compact-ambox .ambox.mbox-small-left{font-size:100%;width:auto;margin:0}.mw-parser-output .compact-ambox .ambox .mbox-text{padding:0!important;margin:0!important}.mw-parser-output .compact-ambox .ambox .mbox-text-span{display:list-item;line-height:1.5em;list-style-type:disc}body.skin-minerva .mw-parser-output .multiple-issues-text>.mw-collapsible-toggle,.mw-parser-output .compact-ambox .ambox .mbox-image,.mw-parser-output .compact-ambox .ambox .mbox-imageright,.mw-parser-output .compact-ambox .ambox .mbox-empty-cell,.mw-parser-output .compact-ambox .hide-when-compact{display:none}
/* end https://en.wikipedia.org/ */
</style>
<p>A <b>table cell</b> is one grouping within a chart <a href="Table_(information)" title="Table (information)">table</a> used for storing information or data. Cells are grouped horizontally (rows of cells) and vertically (columns of cells). Each cell contains information relating to the combination of the row and column headings it is collinear with. In <a href="Software_design" title="Software design">software design</a>, table cells are a key <a href="Software_component" title="Software component">component</a> in <a href="HTML" title="HTML">HTML</a> and <a href="Webpage" class="mw-redirect" title="Webpage">webpage</a> building, and it is part of the <table> component. A coder may specify dimensions for a table cell, and use them to hold sections of webpages.
</p>
<meta property="mw:PageProp/toc">
<div class="mw-heading mw-heading2"><h2 id="HTML_usage">HTML usage</h2></div>
<div class="mw-heading mw-heading3"><h3 id="Kinds_of_cell_in_HTML">Kinds of cell in HTML</h3></div>
<p>A table cell in HTML is a non-empty element and should always be closed. There are two different kinds of table cell in HTML: normal table cell and header cell. <b><td></b> denotes a table cell, the name implying 'data', while <b><th></b> denotes a table 'header'. The two can be used interchangeably, but it is recommended that header cell be only used for the top and side headers of a table.
</p>
<div class="mw-heading mw-heading3"><h3 id="Syntax">Syntax</h3></div>
<p>A table cell also must be nested within a <b><table></b> tag <i>and</i> a <b><tr></b> (table row) tag. If there are more table cell tags in any given row than in any other, the particular <b><tr></b> must be given a <style data-mw-deduplicate="TemplateStyles:r886049734">
/* start https://en.wikipedia.org/ */
.mw-parser-output .monospaced{font-family:monospace,monospace}
/* end https://en.wikipedia.org/ */
</style><span class="monospaced">colspan</span> attribute declaring how many columns of cells wide it should be.
</p>
<div class="mw-heading mw-heading3"><h3 id="Example">Example</h3></div>
<p>An example of an HTML table containing 4 cells:
</p>
<table border="1">
<tbody><tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</tbody></table>
<p>HTML source:
</p>
<div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span class="p"><</span><span class="nt">table</span> <span class="na">border</span><span class="o">=</span><span class="s">"1"</span><span class="p">></span>
<span class="p"><</span><span class="nt">tr</span><span class="p">></span>
<span class="p"><</span><span class="nt">td</span><span class="p">></span>
Cell 1
<span class="p"></</span><span class="nt">td</span><span class="p">></span>
<span class="p"><</span><span class="nt">td</span><span class="p">></span>
Cell 2
<span class="p"></</span><span class="nt">td</span><span class="p">></span>
<span class="p"></</span><span class="nt">tr</span><span class="p">></span>
<span class="p"><</span><span class="nt">tr</span><span class="p">></span>
<span class="p"><</span><span class="nt">td</span><span class="p">></span>
Cell 3
<span class="p"></</span><span class="nt">td</span><span class="p">></span>
<span class="p"><</span><span class="nt">td</span><span class="p">></span>
Cell 4
<span class="p"></</span><span class="nt">td</span><span class="p">></span>
<span class="p"></</span><span class="nt">tr</span><span class="p">></span>
<span class="p"></</span><span class="nt">table</span><span class="p">></span>
</pre></div>
<div class="mw-heading mw-heading3"><h3 id="Colspan_and_rowspan">Colspan and rowspan</h3></div>
<p>Every row must have the same number of table data cells, occasionally table data cells have to span more than one column or row. In this case the tags colspan and/or rowspan are used - where they are set to a number.
</p>
<table width="80%" align="center" style="font-variant:small-caps">
<tbody><tr>
<td style="background:var(--background-color-inverted, black)" width="5%"><br>
</td>
<td style="background:var(--background-color-inverted, black)" width="5%"><br>
</td>
<td style="background:var(--background-color-inverted, black)" width="5%"><br>
</td>
<td><-- <i>This row has three</i> <b>table data cells</b>
</td></tr>
<tr>
<td colspan="2" style="background:var(--background-color-progressive, blue);"><br>
</td>
<td style="background:var(--background-color-inverted, black)"><br>
</td>
<td><-- <i>This row has two. The first uses</i> <b><code>colspan="2"</code></b>
</td></tr>
<tr>
<td rowspan="2" style="background:var(--background-color-destructive, red)"><br>
</td>
<td style="background:var(--background-color-inverted, black)"><br>
</td>
<td style="background:var(--background-color-inverted, black)"><br>
</td>
<td><-- <i>This row has three table data cells, but one spans two rows because it uses</i> <b><code>rowspan="2"</code></b>
</td></tr>
<tr>
<td style="background:var(--background-color-inverted, black)"><br>
</td>
<td style="background:var(--background-color-inverted, black)"><br>
</td>
<td><-- <i>This row has only two table data cells, because its first is being taken up</i>
</td></tr></tbody></table>
<div class="mw-heading mw-heading2"><h2 id="See_also">See also</h2></div>
<ul><li>Tables in Wikipedia pages</li>
<li><a href="Table_(HTML)" class="mw-redirect" title="Table (HTML)">Table (HTML)</a></li></ul>
<div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2></div>
<ul><li><a rel="nofollow" class="external text" href="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6">TH and TD elements</a></li>
<li><a rel="nofollow" class="external text" href="http://www.w3.org/wiki/HTML/Elements/td">DHTML Reference: td</a></li>
<li><a rel="nofollow" class="external text" href="http://www.idocs.com/tags/tables/_TD.html">TD Tag</a></li></ul></div><!--htdig_noindex--><div><div class="zim-footer">
This article is issued from <a class="external text" title="Last edited on 2025-02-01" href="https://en.wikipedia.org/wiki/?title=Table_cell&oldid=1273145020">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.
</div>
</div><!--/htdig_noindex--></div>
</div>
</main>
</div>
</div>
</div>
</body></html>